import React from "react";
import { Box, Tabs, TabList, Tab, TabPanels, TabPanel, Text } from "@chakra-ui/core";
import SignIn from './signIn'
import SignUp from './signUp'

function Login() {
  return (
    <Box
      w="100vw"
      h="100vh"
      bgColor="#f1f1f1"
      boxSizing="border-box"
      pt="100px"
    >
      <Box
        w="400px"
        mx="auto"
        p="50px 50px 30px"
        bgColor="#ffffff"
        boxShadow="0 0 8px rgba(0,0,0,.1)"
      >
        <Tabs>
          <TabList borderBottom="none" mb="50px" d="flex" justifyContent="center">
            <Tab
              _selected={{
                color: "#ea6f5a",
                borderBottom: "2px solid #ea6f5a",
              }}
              _focus={{ boxShadow: "none" }}
              _hover={{borderBottom: "2px solid #ea6f5a"}}
              _active={{ backgroundColor: "transparent" }}
              border="none"
              outline="none"
              fontSize="18px"
              fontWeight="700"
              color="#969696"
            >
              登录
            </Tab>
            <Text px="10px" fontSize="20px" fontWeight="700" color="#969696">.</Text>
            <Tab
              _selected={{
                color: "#ea6f5a",
                borderBottom: "2px solid #ea6f5a",
              }}
              _focus={{ boxShadow: "none" }}
              _hover={{borderBottom: "2px solid #ea6f5a"}}
              _active={{ backgroundColor: "transparent" }}
              border="none"
              outline="none"
              fontSize="18px"
              fontWeight="700"
              color="#969696"
            >
              注册
            </Tab>
          </TabList>
          <TabPanels>
            <TabPanel>
              <SignIn />
            </TabPanel>
            <TabPanel>
              <SignUp />
            </TabPanel>
          </TabPanels>
        </Tabs>
      </Box>
    </Box>
  );
}

export default Login;
